<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <title>例子</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            /* 以15px为标准 */
            font-size: 15px;
        }

        .yw-main {
            padding: 10px;
        }
    </style>
    <link rel="stylesheet" href="../public/css/public.css">
    <link rel="stylesheet" href="../public/css/button.css">
    <link rel="stylesheet" href="../public/css/dialog-message-box.css">
    <link rel="stylesheet" href="../public/css/custom-message-box.css">
    <link rel="stylesheet" href="../public/css/upload-file-box.css">
    <link rel="stylesheet" href="../public/css/loading-box.css">
    <link rel="stylesheet" href="../public/css/input-text-box.css">
    <link rel="stylesheet" href="../public/css/input-select-box.css">
    <link rel="stylesheet" href="../public/css/input-radio-box.css">
    <link rel="stylesheet" href="../public/css/input-checkbox-box.css">
    <link rel="stylesheet" href="../public/css/table-box.css">
    <link rel="stylesheet" href="../public/css/zIndex.css">
    <script src="../public/js/string-util.js"></script>
    <script src="../public/js/public.js"></script>
    <script src="../public/js/custom-message-box.js"></script>
    <script src="../public/js/dialog-message-box.js"></script>
    <script src="../public/js/upload-file-box.js"></script>
    <script src="../public/js/loading-box.js"></script>
    <script src="../public/js/input-text-box.js"></script>
    <script src="../public/js/input-select-box.js"></script>
    <script src="../public/js/input-radio-box.js"></script>
    <script src="../public/js/input-checkbox-box.js"></script>
    <script src="../public/js/table-box.js"></script>
    <script src="../public/js/request-util.js"></script>
</head>

<body>
    <div id="test"
        style="width: 1600px;display: flex;justify-content: center;align-items: center;flex-direction: column;">

    </div>

    <div class="custom-message-content a1">
        lalalal:<input type="text" name="" id="">
    </div>

    <div class="custom-message-content b1">
        bbbbbbbb:<input type="text" name="" id="">
    </div>
    <button class="lan" style="margin-left: 200px;">测试</button>



    <!-- <div class="yw-main">
        <input type="file" style="display: none;">
        <button class="select-file lan">选择文件</button>
        <button class="run lv" style="margin-left: 30px;">运行</button>
        <div style="width: 100%;height: 2px;background: linear-gradient(to right,red,blue,red);margin-top: 10px;"></div>
        <p style="margin-top: 10px;color: deeppink;">使用说明：</p>
        <p style="margin-left: 10px;color: deeppink;">特别说明：如果是第一次使用此功能可能会很慢，请耐心等待！</p>
        <p style="margin-left: 10px;color: deeppink;">先选择视频，然后括选，括选的时候范围可以大一点（但不能太大，会影响原本没有水印的地方），生成就好了。</p>
    </div> -->
    <script>
        dialogMessageBoxRun(() => {
            console.log('123');
        });
        // // dialogMessageBoxShow("<span style='color:red;'>12334234324324</span>");
        // setTimeout(() => {
        //     dialogMessageBoxShow("如果是第一次使用此功能可能会很慢，请耐心等待！");
        // }, 1000);


        customMessageBoxRun(() => {
            console.log("123");
        });

        // const a1El = document.querySelector('.a1');
        // setTimeout(() => {
        //     customMessageBoxShow(a1El);
        // }, 1000);

        loadingBoxRun();
        // loadingBoxShow();

        // setTimeout(() => {
        //     loadingBoxClose();
        // }, 5000);

        const uploadFileBoxEl = addUploadFileBox(file => {
            console.log(file);
        }, true, ['xls', 'xlsx'], dialogMessageBoxShow);
        //自主控制此元素
        const testEl = document.querySelector('#test');
        //'beforebegin': 在该元素本身的前面。
        // 'afterbegin':只在该元素当中，在该元素第一个子孩子前面。
        // 'beforeend':只在该元素当中，在该元素最后一个子孩子后面。
        // 'afterend': 在该元素本身的后面。
        console.log(uploadFileBoxEl);
        testEl.insertAdjacentElement('afterbegin', uploadFileBoxEl);


        const inputTextBoxEl = addInputTextBox(text => {
            console.log(text);
        }, '工作簿名称:', true);
        console.log(inputTextBoxEl);
        testEl.insertAdjacentElement('beforeend', inputTextBoxEl);


        const inputSelectBoxEl = addInputSelectBox(text => {
            console.log(text);
        }, '金额所在列:', [
            { '返回码': '返回码' },
            { '返回信息': '返回信息' },
            { '收银台链接': '收银台链接' }
        ], true);
        console.log(inputSelectBoxEl.outerHTML);
        testEl.insertAdjacentElement('beforeend', inputSelectBoxEl);

        const inputRadioBoxEl = addInputRadiotBox(text => {
            console.log(text);
        }, '难度级别', [
            { small: '小力度' },
            { middle: '中力度' },
            { big: '大力度' },
        ], true);
        console.log(inputRadioBoxEl.outerHTML);
        testEl.insertAdjacentElement('beforeend', inputRadioBoxEl);

        const inputCheckBoxEl = addInputCheckboxtBox(arr => {
            console.log(arr);
        }, '兴趣爱好', [
            { 吃饭: '吃饭' },
            { 睡觉: '睡觉' },
            { 游泳: '游泳' },
        ], true);
        console.log(inputCheckBoxEl.outerHTML);
        testEl.insertAdjacentElement('beforeend', inputCheckBoxEl);


        const tableBoxEl = addTableBox(15, 1.2, [
        ]);
        console.log(tableBoxEl.outerHTML);
        testEl.insertAdjacentElement('beforeend', tableBoxEl);


        const a1El = document.querySelector('.a1');
        const b1El = document.querySelector('.b1');
        let i = 0;

        document.querySelector('button').addEventListener('click', () => {
            // console.log(checkInput(uploadFileBoxEl));
            console.log(checkInput(inputRadioBoxEl));
            // console.log(checkInput(inputSelectBoxEl));
            // console.log(checkInput(inputTextBoxEl));
            // console.log(checkInput(inputCheckBoxEl));

            // dialogMessageBoxShow("你好，我的世界！");

            // i++;
            // if(i % 2 == 0){
            //     customMessageBoxShow(a1El);
            // }else{
            //     customMessageBoxShow(b1El);
            // }

            // loadingBoxShow();

            // setTimeout(() => {
            //     loadingBoxClose();
            // }, 2000);


            // const formData = new FormData();
            // formData.append('sheetName','');
            // formData.append('columnName','贷方金额');
            // sendByXhr('http://localhost:8088/juanjuan/accounting/test', response=>{
            //     console.log(response);
            // }, text=>{
            //     console.log(text);
            // }, 'POST', formData);



            // sendByFetch('http://localhost:8088/juanjuan/accounting/test', response=>{
            //     console.log(response);
            // }, text=>{
            //     console.log(text);
            // }, 'POST', formData);


            // downloadFileByGet('https://www.baidu.com', {
            //     aaa: '123',
            //     bbb: 456,
            //     ccc:'78978'
            // });

            // downloadFileByPosst('https://www.baidu.com',{
            //     sheetName:'工作簿1',
            //     columnName:'金额',
            //     data:JSON.stringify([
            //         ['1','2'],
            //         ['4','5'],
            //         ['7','8']
            //     ])
            // })
        });
    </script>
</body>

</html>